import MarkdownIt from 'markdown-it'
import hljs from 'highlight.js'

const md = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true,
    breaks: true,
    highlight: function (str, lang) {
        /* 
            str-> @Configuration
            @EnableWebMvc
            @EnableGlobalMethodSecurity(prePostEnabled = true) // 因为要控制controller中的方法访问，所以此注解要加到子容器中
            @ComponentScan(basePackages = "com.zzhua.controller",
                            excludeFilters = {@ComponentScan.Filter(type = FilterType.ANNOTATION,
                            classes = Service.class)})
            public class MyWebConfig implements WebMvcConfigurer {

                @Override
                public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
                    // 开启静态资源访问
                    configurer.enable();
                }

            }
            lang-> java {name: 'Java', aliases: Array(1), keywords: {…}, illegal: /<\/|#/, contains: Array(23), …}
    
        */
        // console.log('str->', str, 'lang->', lang, hljs.getLanguage('java'));
        /* 
            <span class="hljs-meta">@Configuration</span>
            <span class="hljs-meta">@EnableWebMvc</span>
            <span class="hljs-meta">@EnableGlobalMethodSecurity(prePostEnabled = true)</span> <span class="hljs-comment">// 因为要控制controller中的方法访问，所以此注解要加到子容器中</span>
            <span class="hljs-meta">@ComponentScan(basePackages = &quot;com.zzhua.controller&quot;,
                            excludeFilters = {@ComponentScan.Filter(type = FilterType.ANNOTATION,
                            classes = Service.class)})</span>
            <span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyWebConfig</span> <span class="hljs-keyword">implements</span> <span class="hljs-title class_">WebMvcConfigurer</span> {

                <span class="hljs-meta">@Override</span>
                <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">configureDefaultServletHandling</span><span class="hljs-params">(DefaultServletHandlerConfigurer configurer)</span> {
                    <span class="hljs-comment">// 开启静态资源访问</span>
                    configurer.enable();
                }

            }
        */
        // console.log(hljs.highlight(str, { language: lang }).value);

        if (lang && hljs.getLanguage(lang)) {
            try {
                let highlightedHtml = hljs.highlight(str, { language: lang }).value

                // 生成行号
                let lineNum = highlightedHtml.split('\n').length - 1
                let lineNumbersRowsStart = `<span aria-hidden="true" class="line-numbers-rows">`
                let lineNumbersRowsEnd = `</span>`
                for (let i = 0; i < lineNum; i++) {
                    lineNumbersRowsStart += `<span></span>`
                }
                const lineNumbersRows = lineNumbersRowsStart + lineNumbersRowsEnd

                let languageName = `<b class="language-name">${lang}</b>`

                // 当前时间加随机数生成唯一的id标识
                var d = new Date().getTime();
                if (window.performance && typeof window.performance.now === "function") {
                    d += performance.now();
                }
                const codeIndex = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
                    /[xy]/g,
                    function (c) {
                        var r = (d + Math.random() * 16) % 16 | 0;
                        d = Math.floor(d / 16);
                        return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
                    }
                );
                // 复制功能需要一个textarea（这个id需要前面加个字母啥的，不能以数字开头）
                let textAreaHtml = `<textarea class="copy-textarea" id="copy${codeIndex}">${str}</textarea>`

                let copyButton = `<button class="copy-btn iconfont icon-fuzhi"  data-clipboard-action="copy" data-clipboard-target="#copy${codeIndex}" type="button"></button>`

                /* 如果返回的不含pre code标签，它会自己加上；如果返回的含有pre code标签，它就不加了 */
                return `<pre><code class="language-${lang} hljs">${highlightedHtml}</code>${lineNumbersRows}${languageName}${copyButton}${textAreaHtml}</pre>`;
            } catch (__) { }
        }
        return ""
    }
}).use(require("markdown-it-sub"))
    .use(require("markdown-it-sup"))
    .use(require("markdown-it-mark"))
    .use(require("markdown-it-abbr"))
    .use(require("markdown-it-container"))
    .use(require("markdown-it-deflist"))
    .use(require("markdown-it-emoji"))
    .use(require("markdown-it-footnote"))
    .use(require("markdown-it-ins"))
    .use(require("markdown-it-katex-external"))
    .use(require("markdown-it-task-lists"))
    .use(require('markdown-it-tips'));

let r = md.render(`
::: info
this is my first website…
:::
`)
console.log(r,'r');

export default md